<template>
  <!-- 客户分配录入页面 --添加客户经理界面 -->
  <div class="distribution-enter">
    <div style="height: 30px; line-height: 30px;padding-left: 20px;">
      <h1>客户分配</h1>
    </div>
    <div class="btns-group">
      <ui-button class="primary-btn" @click="addManager" icon="ui-icon-search">添加</ui-button>
      <ui-button class="primary-btn" @click="onChoiceManager" icon="ui-icon-search">选择客户经理</ui-button>
    </div>
    <div>
      <vx-table :table-data="tableData" :columns="columns" :buttom-group="buttomGroup" @deleteData="deleteData" @modifyData="modifyData"></vx-table>
      <ui-pagination
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :layout="layout"
        :page-sizes="pageSizeList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </ui-pagination>
    </div>
    <ui-row type="flex" class="row-bg" justify="center">
      <ui-button class="primary-btn" @click="returnPrePage">返回</ui-button>
      <ui-button class="primary-btn" @click="submitContent">提交</ui-button>
    </ui-row>
    <ui-dialog :visible.sync="dialogshow" title="添加客户经理" width="30%">
      <ui-form v-model="addForm">
        <ui-form-item label="客户经理名称">
          <ui-select v-model="addForm.userName" placeholder="请选择客户经理名称">
            <ui-option :value="0" label="零售"></ui-option>
            <ui-option :value="1" label="公司"></ui-option>
          </ui-select>
        </ui-form-item>
        <!-- 这里可改成input 禁止输入  也可以携程select-->
        <ui-form-item label="客户经理所属机构">
          <ui-input type="text" placeholder="请输入客户经理所属机构" v-model="addForm.updatedBy"> </ui-input>
        </ui-form-item>
        <ui-form-item label="客户经理编号">
          <ui-input type="text" placeholder="客户经理编号" v-model="addForm.customerBy"> </ui-input>
        </ui-form-item>

        <ui-form-item label="管理类型">
          <template>
            <ui-radio-group v-model="addForm.managetype">
              <ui-radio label="1">主办</ui-radio>
              <ui-radio label="2">协办</ui-radio>
            </ui-radio-group>
          </template>
        </ui-form-item>
      </ui-form>
      <span slot="footer" class="dialog-footer">
        <ui-button @click="dialogshow = false">取 消</ui-button>
        <ui-button type="primary" @click="dialogshow = false">确 定</ui-button>
      </span>
    </ui-dialog>
    <!-- 选择客户经理 -->
    <ui-dialog :visible.sync="managerDialog" title="客户分配" width="50%">
      <div class="search-header">
        <div class="search-left">
          <h1>客户经理：</h1>
          <ui-input v-model="managerName" placeholder="请输入"></ui-input>
        </div>
        <div class="search-btns">
          <ui-button type="warning" plain @click="queryManager">查询</ui-button>
          <ui-button type="warning" plain @click="resetManager">重置</ui-button>
        </div>
      </div>
      <div class="table-list">
        <vx-table :columns="columns" :table-data="tableData" :is-select="true" @multipleSelection="multipleSelection"> </vx-table>
        <div class="page">
          <ui-pagination
            :total="managerTotal"
            :page-size="managerPageSize"
            :current-page="managerCurrentPage"
            :layout="layout"
            @current-change="handleCurrentChange"
          >
          </ui-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <ui-button type="primary" @click="dialogshow = false">确 定</ui-button>
        <ui-button @click="dialogshow = false">取 消</ui-button>
      </span>
    </ui-dialog>
  </div>
</template>
<script>
import vxTable from '@/components/vx-table';
import { cloneDeep } from '@csii/vx-util';
export default {
  name:'distribution-enter',
  components: {
    vxTable,
  },
  data() {
    return {
      addForm: {},
      dialogshow: false,
      managerDialog: true,
      managerName: '',
      layout: 'total, sizes, prev, pager, next, jumper', // 分页顺序
      tableData: [{ userName: 1, updatedBy: '1', customerBy: '1', managetype: '1' }],
      columns: [
        {
          prop: 'userName',
          label: '客户经理名称',
          fixed: true,
          width: '120',
        },
        {
          prop: 'updatedBy',
          label: '客户经理所属机构',
          fixed: true,
        },
        {
          prop: 'customerBy',
          label: '客户经理编号',
          fixed: true,
        },
        {
          prop: 'managetype',
          label: '管理类型',
          formatter: (row, column, cellValue, index) => {
            return cellValue === '1' ? '主办' : '协办';
          },
          fixed: true,
        },
      ],
      buttomGroup: [
        { label: '删除', methodsName: 'deleteData' },
        { label: '修改', methodsName: 'modifyData' },
      ],
    };
  },
  methods: {
    addManager() {
      this.dialogshow = true;
    },
    // 提交
    submitContent() {
      this.$router.push({ path: '/customerdivision/distribution/distributionconfirm' });
    },
    // 返回
    returnPrePage() {
      this.$router.push({ path: '/customerdivision/distribution/distributionsearch' });
    },
    // 选择客户经理
    onChoiceManager() {},
    // 删除
    deleteData(val) {
      console.log(val);
    },
    // 修改
    modifyData(val) {
      this.dialogshow = true;
      this.addForm = cloneDeep(val);
    },
    // 查询客户经理
    queryManager() {},
    // 重置客户经理
    resetManager() {
      this.managerName = '';
    },
  },
};
</script>
<style lang="scss" scoped>
.distribution-enter {
  h1 {
    font-size: 20px;
  }
  .btns-group {
    float: right;
    margin-bottom: 20px;
  }
  .search-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search-left {
      h1 {
        width: 105px;
        font-size: 16px;
      }
      display: flex;
      align-items: center;
      width: 50%;
    }
  }
}
</style>
